<template>
  <!-- 项目实施 - 3任务清单 -->
  <div class="task-list">
    <el-row :gutter="20">
      <el-col :span="6" v-for="(i, idx) in cardListData" :key="idx" class="card-group">
        <card-list :cardData="i" :idx="idx" @cardClick="showModal('card1')"></card-list>
      </el-col>
      <el-col :span="24" style="margin-top:16px;">
        <el-card class="box-card bottom-card">
          <div slot="header" style="margin: 0;">
            <card-title title="任务清单"></card-title>
          </div>
          <el-row :gutter="12">
            <el-col :span="24">
              <el-form class="search" :inline="true" :model="formData" label-position="right" label-width="90px">
                <el-row :gutter="12">
                  <el-col :span="16" v-if="showSearch == false">
                    <advancedFilter></advancedFilter>
                  </el-col>
                  <el-col :span="6" v-if="showSearch">
                    <el-form-item label="项目名称">
                      <el-input v-model="formData.ipt1" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="showSearch">
                    <el-form-item label="任务名称">
                      <el-input v-model="formData.ipt2" clearable placeholder="搜索关键字" style="width: 100%;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="showSearch">
                    <el-form-item label="审批完成">
                      <el-select v-model="formData.sel1" multiple clearable placeholder="请选择..." style="width: 100%;">
                        <el-option label="勾选" value="shanghai"></el-option>
                        <el-option label="未勾选" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="showSearch">
                    <el-form-item label="里程碑">
                      <el-select v-model="formData.sel2" multiple clearable placeholder="请选择..." style="width: 100%;">
                        <el-option label="勾选" value="shanghai"></el-option>
                        <el-option label="未勾选" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-if="showSearch">
                    <el-form-item label="任务状态">
                      <el-select v-model="formData.sel3" multiple clearable placeholder="请选择..." style="width: 100%;">
                        <el-option label="待办" value="1"></el-option>
                        <el-option label="进行中" value="2"></el-option>
                        <el-option label="完成" value="3"></el-option>
                        <el-option label="暂停" value="4"></el-option>
                        <el-option label="终止" value="5"></el-option>
                        <el-option label="空值" value="6"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="showSearch ? 18 : 8" style="text-align: right;">
                    <el-button type="primary">筛选</el-button>
                    <el-button @click="resetForm">重置</el-button>
                    <el-button type="text" @click="changeSearch"> {{showSearch===true ? '高级筛选' : '普通筛选'}} </el-button>
                  </el-col>
                </el-row>
              </el-form>
            </el-col>
            <el-col :span="24">
              <el-row :gutter="12" style="display: inline-flex;width: 100%;">
                <el-col :span="4" :md="5" class="border-r">
                  <el-input v-model="treeSearch" class="tree-search" placeholder="搜索关键字" suffix-icon="el-icon-search"></el-input>
                  <el-tree class="cust-tree" node-key="id" :data="treeData" ref="tree" :props="defaultProps" @node-click="handleNodeClick" default-expand-all></el-tree>
                </el-col>
                <el-col :span="20" :md="19">
                  <cust-act-table
                    ref="custActTable"
                    tableType=""
                    :list="tableData"
                    :colConfigs="customColumns"
                    @changePage="changePage"
                    @getSelectedRow="showModal('table')"
                    :pageNum="page.pageNum"
                    :pageSize="page.pageSize"
                    :total="page.total"
                    showIdx
                    :showAct="false"
                    rKey="index"
                  ></cust-act-table>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!-- 卡片一层弹窗 -->
    <el-dialog class="card-modal"  :title="cardTitle1" :visible.sync="cardModalState1" @close="closeModal('card1')" width="1200px" :close-on-click-modal="false">
      <div class="plan-change-btns">
        <el-dropdown trigger="click" style="margin-right:10px;">
          <el-button type="primary" plain>
            全部数据<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>全部数据</el-dropdown-item>
            <el-dropdown-item>
              <span @click="shortcutFilter(true)">
                <i class="el-icon-plus" style="color: #11A983;"></i>添加快捷筛选
              </span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button @click="shortcutFilter(true)" icon="el-icon-files" type="primary" plain> 筛选 </el-button>
        <el-button @click="$message.info('转发')" type="primary" plain> 转发 </el-button>
        <el-button @click="$message.info('导出')" type="primary" plain> 导出 </el-button>
        <el-button @click="$message.info('打印')" type="primary" plain> 打印 </el-button>
        <el-button @click="$message.info('致信交流')" type="primary" plain> 致信交流 </el-button>
        <i class="el-icon-question" @click="helpState = true" title="帮助"></i>
      </div>
      <cust-act-table
        ref="custCardTable"
        tableType="taskList"
        :list="cardData"
        :colConfigs="cardCol"
        @changePage="changeCardTablePage"
        @boxClick="boxClick"
        :pageNum="cardTablePage.pageNum"
        :pageSize="cardTablePage.pageSize"
        :total="cardTablePage.total"
        :showIdx="false"
        :showAct="false"
        rKey="index"
      ></cust-act-table>
    </el-dialog>
    <!-- 卡片二层弹窗 -->
    <el-dialog class="card-modal" :title="cardTitle2" :visible.sync="cardModalState2" @close="closeModal('card2')" width="800px"  :close-on-click-modal="false">
      <cust-act-table
        ref="custCardDetailTable"
        tableType=""
        :list="cardData2"
        :colConfigs="cardCol2"
        @changePage="changeCustCardDetailTablePage"
        @getSelectedRow="showModal('card3')"
        :pageNum="custCardDetailPage.pageNum"
        :pageSize="custCardDetailPage.pageSize"
        :total="custCardDetailPage.total"
        :showIdx="false"
        :showAct="false"
        rKey="index"
      ></cust-act-table>
    </el-dialog>
    <!-- 点击列表弹窗 -->
    <el-dialog class="table-modal" :title="modalType == 'card3' ? '穿透显示详情' : '查看'" :visible.sync="tableModalState" @close="closeModal('table')" width="940px" :close-on-click-modal="false">
      <modalBtns :modalType="modalType == 'card3' ? 'table' : modalType" @close="closeModal('table')"></modalBtns>
      <formName text="任务档案"></formName>
      <div class="form-content">
        <formPart listTitle="基本信息" @clickModalBtn="showNextLevelModal" ref="info1" modalTitle="modalDetail" :formList="formInfo.info1"></formPart>
        <formPart listTitle="进度信息" @clickModalBtn="showNextLevelModal" ref="info2" modalTitle="modalDetail" :formList="formInfo.info2"></formPart>
        <formPart listTitle="项目信息" ref="info3" modalTitle="modalDetail" :formList="formInfo.info3"></formPart>
      </div>
    </el-dialog>
    <!-- 前置任务 -->
    <el-dialog class="pre-task-modal" title="前置任务查询" :visible.sync="preTaskModalState" @close="closeModal('preTaskModal')"  width="1000px" :close-on-click-modal="false">
      <cust-act-table
        ref="preTaskModalTable"
        tableType=""
        :list="preTaskData"
        :colConfigs="preTaskCol"
        @changePage="preTaskModalTablePage"
        :pageNum="preTaskModalPage.pageNum"
        :pageSize="preTaskModalPage.pageSize"
        :total="preTaskModalPage.total"
        :showIdx="false"
        :showAct="false"
        rKey="index"
      ></cust-act-table>
    </el-dialog>
    <!-- 工作报告 -->
    <el-dialog class="work-modal" title="任务工作进度报告查询" :visible.sync="workModalState" @close="closeModal('workModal')" width="1000px" :close-on-click-modal="false">
      <cust-act-table
        ref="workModalTable"
        tableType=""
        :list="workModalData"
        :colConfigs="workModalCol"
        @changePage="workModalTablePage"
        @getSelectedRow="showModal('workModal2')"
        :pageNum="workModalPage.pageNum"
        :pageSize="workModalPage.pageSize"
        :total="workModalPage.total"
        :showIdx="false"
        :showAct="false"
        rKey="index"
      ></cust-act-table>
    </el-dialog>
    <!-- 工作报告二级弹窗 -->
    <el-dialog class="work-modal" title="查询穿透显示" :visible.sync="workModalState2" @close="closeModal('workModal2')" width="1000px" :close-on-click-modal="false">
      <formName text="工作报告档案"></formName>
      <div class="form-content">
        <formPart :showListTitle="false" ref="info1" modalTitle="modalDetail" :formList="workModalDetail.info1"></formPart>
        <formPart listTitle="基本信息" ref="info2" modalTitle="modalDetail" :formList="workModalDetail.info2"></formPart>
        <formPart listTitle="任务进度" ref="info3" modalTitle="TAB-TABLE-NOACT" :formList="workModalDetail.info3"></formPart>
      </div>
    </el-dialog>
    <!-- 添加快捷筛选 -->
    <el-dialog class="shortcut-modal" :visible.sync="shortcutState" @close="shortcutFilter(false)" :width="shortType==0? '800px': '1000px'" show-close :close-on-click-modal="false">
      <div slot="title" class="shortcut-modal-title">
        <span>设置筛选条件</span>
        <div>
          <el-button type="text"> 重置 </el-button>
          <el-button type="text"> 清空 </el-button>
        </div>
      </div>
      <div class="shortcut-modal-body">
        <div class="select-type">
          <span>筛选模式</span>
          <el-radio-group v-model="shortType">
            <el-radio :label="0">普通筛选</el-radio>
            <el-radio :label="1">高级筛选</el-radio>
          </el-radio-group>
        </div>
        <el-form v-if="shortType == 0" :inline="true" :model="shortForm"  class="demo-form-inline">
          <el-form-item v-for="(i, idx) in shortForm.item1" :key="'item1.' + idx" :label="i.title" :prop="'item1.' + idx + '.value'">
            <el-select v-model="i.sel1" multiple clearable placeholder="请选择..." style="width: 220px">
            </el-select>
            <el-select v-model="i.sel2" multiple clearable placeholder="请选择..." style="width: 120px;margin-left:10px;">
            </el-select>
            <el-input v-model="i.ipt1" clearable placeholder="请输入" style="width: 250px;margin-left:10px;"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button v-if="index1 != 0" icon="el-icon-minus" plain class="cust-btn" @click="handleRemove"></el-button>
            <el-button icon="el-icon-plus" plain class="cust-btn" @click="handleAdd"></el-button>
          </el-form-item>
        </el-form>
        <el-form v-if="shortType == 1" :inline="true" :model="shortForm"  class="demo-form-inline">
          <el-form-item v-for="(i, idx) in shortForm.item2" :key="'item2.' + idx" :label="i.title" :prop="'item2.' + idx + '.value'">
            <el-select v-model="i.sel1" multiple clearable placeholder="请选择..." style="width: 100px">
            </el-select>
            <el-select v-model="i.sel2" multiple clearable placeholder="请选择..." style="width: 180px;margin-left:10px;">
            </el-select>
            <el-select v-model="i.sel3" multiple clearable placeholder="请选择..." style="width: 120px;margin-left:10px;">
            </el-select>
            <el-input v-model="i.ipt1" disabled style="width: 180px;margin-left:10px;"></el-input>
            <el-select v-model="i.sel4" multiple clearable placeholder="请选择..." style="width: 100px;margin-left:10px;">
            </el-select>
            <el-select v-model="i.sel5" multiple clearable placeholder="请选择..." style="width: 100px;margin-left:10px;">
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-button v-if="index2 != 0" icon="el-icon-minus" plain class="cust-btn" @click="handleRemove"></el-button>
            <el-button icon="el-icon-plus" plain class="cust-btn" @click="handleAdd"></el-button>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="shortcut-modal-footer">
        <div>
          <el-button type="text" @click="saveShortcut"> 另存为 </el-button>
          <el-button type="text" @click="saveShortcut"> 保存 </el-button>
        </div>
        <div>
          <el-button type="primary" plain @click="shortcutFilter(false)"> 取消 </el-button>
          <el-button type="primary" @click="shortcutFilter(false)"> 筛选 </el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 帮助弹窗 -->
    <el-dialog class="help-modal" title="帮助" :visible.sync="helpState" @close="helpState=false" width="600px" show-close :close-on-click-modal="false">
      <div>
        <h4>【快捷筛选】</h4>
        <ul>
          <li v-for="(i, idx) in helpText" :key="idx">
            <h4>{{ i.title }}</h4>
            <h5>{{ i.subTitle }}</h5>
            <p>{{ i.text }}</p>
          </li>
        </ul>
      </div>
      <span slot="footer" class="help-modal-footer">
        <el-button type="primary" @click="helpState=false"> 关闭 </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { tableData3, customColumns3, menu3_cardTableData, menu3_cardTableCol, helpText, menu3_custCardDetailTableData, menu3_custCardDetailTableCol, preTaskData, preTaskCol, workModalData, workModalCol, workModalDetail } from './js/staticData';
import cardTitle from './components/title';
import cardList from './components/cardList';
import advancedFilter from './components/advancedFilter';
import modalBtns from './components/modalBtns';
import formName from './components/formName';
import formPart from './components/formPart';
import custActTable from "./components/custActTable.vue";
export default {
  name: "taskList",
  components: {cardTitle, cardList, advancedFilter, custActTable, modalBtns, formName, formPart},
  data() {
    return {
      cardIdx: 0,
      cardListData: [
        {
          img3: require('./images/card-icon7.png'),
          line1: '任务数量',
          line3: '1,005'
        },
        {
          img3: require('./images/card-icon1.png'),
          line1: '未审批',
          line3: '393'
        },
        {
          img3: require('./images/card-icon4.png'),
          line1: '已完成',
          line3: '187'
        },
        {
          img3: require('./images/card-icon2.png'),
          line1: '已超期',
          line3: '777'
        }
      ],
      formData: {
        ipt1: '',
        ipt2: '',
        sel1: [],
        sel2: [],
        sel3: [],
      },
      treeSearch: '',
      treeData: [
        {
          label: '任务状态',
          children: [
            { label: '待办', id: 0},
            { label: '进行中', id: 1},
            { label: '完成', id: 2},
            { label: '暂停', id: 3},
            { label: '终止', id: 4}
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      contentIdx: 0,
      showSearch: true,
      helpState: false,
      helpText: helpText,
      shortcutState: false,
      shortType: 0,
      shortForm: {
        item1: [
          {
            sel1: '',
            sel2: '',
            ipt1: '',
          }
        ],
        item2: [
          {
            sel1: '',
            sel2: '',
            sel3: '',
            sel4: '',
            sel5: '',
            ipt1: '',
          }
        ]
      },
      index1: 0,
      index2: 0,
      tableData: tableData3[0],
      customColumns: customColumns3,
      cardData: menu3_cardTableData,
      cardCol: menu3_cardTableCol,
      cardData2: menu3_custCardDetailTableData,
      cardCol2: menu3_custCardDetailTableCol,
      preTaskData: preTaskData,
      preTaskCol: preTaskCol,
      workModalCol: workModalCol,
      workModalData: workModalData,
      workModalDetail: workModalDetail,
      cardTitle1: `任务状态统计-负责项目`,
      cardTitle2: '',
      formInfo: {
        info1: [
          { l: '任务名称', v: '蓝旗机器人造林', span: 12 },
          { l: '任务模式', v: '自动', span: 6 },
          { l: '任务状态', v: '待办', span: 6 },
          { l: '任务序号', v: '12', span: 6 },
          { l: '负责人', v: '朱冠', span: 6 },
          { l: '负责人部门', v: 'XX部门', span: 6 },
          { l: '里程碑', v: '', span: 3, type: 'checkBox', checked: false },
          { l: '', v: '前置任务', span: 3, type: 'noLabelRoundButton', openModal: 'preTaskModal' },
          { l: 'web标识', v: 'test', span: 6 },
          { l: '标记关键任务', v: '', span: 6, type: 'checkBox', checked: false },
          { l: '计算出关键任务', v: '', span: 6, type: 'checkBox', checked: false },
          { l: '审批完成', v: '', span: 6, type: 'checkBox', checked: true },
          { l: '任务备注', v: '', span: 12 },
          { l: '限制类型', v: '不得早于...开始', span: 6 },
          { l: '限制日期', v: '2024-07-24', span: 6 },
          { l: '需提交成果', v: '', span: 12 },
          { l: '成果文件', v: '', span: 12 },
          { l: '父任务名称', v: '', span: 12 },
          { l: '固定日期', v: '否', span: 6 },
          { l: '是否父任务', v: '', span: 6 }
        ],
        info2: [
          { l: '计划工期', v: '9 天(自然日)', span: 6 },
          { l: '计划开始', v: '2024-07-20', span: 6 },
          { l: '计划完成', v: '2024-07-20', span: 6 },
          { l: '完成进度', v: '80 %', span: 3 },
          { l: '', v: '工作报告', span: 3, type: 'noLabelRoundButton', openModal: 'workModal' },
          { l: '实际工期', v: '0 天(自然日)', span: 6 },
          { l: '实际开始', v: '', span: 6 },
          { l: '实际完成', v: '', span: 6 },
          { l: '', v: '80', span: 6, type: 'noLabelProgress' },
        ],
        info3: [
          { l: '所属项目', v: 'XX有限责任公司系统建设', span: 12 },
          { l: '项目编号', v: 'SKHT2022080009', span: 6 },
          { l: '项目状态', v: '启动', span: 6 }
        ]
      },
      page: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      cardTablePage: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      custCardDetailPage: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      preTaskModalPage: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      workModalPage: {
        pageNum: 1, // 当前页
        pageSize: 10, // 每页条数
        total: 0, // 总条数
      },
      cardModalState1: false, // 卡片弹窗
      cardModalState2: false, // 卡片二级弹窗
      preTaskModalState: false, // 前置任务弹窗
      workModalState: false, // 工作报告弹窗
      workModalState2: false, // 工作报告二级弹窗
      tableModalState: false, // 列表详情弹窗
      modalType: '',
    }
  },
  watch: {
    tableData: {
      handler(n, o) {
        setTimeout(() => {
          document.querySelector('.border-r').style.height = `${document.querySelector('.cust-act-table').offsetHeight}px`;
        }, 10)
      },
      deep: true
    },
    contentIdx(n) {},
    modalType(n){},
    cardIdx(n){},
  },
  mounted() {
    this.$nextTick(() => {
      this.tableData = tableData3[0];
      setTimeout(() => {
        document.querySelector('.border-r').style.height = `${document.querySelector('.cust-act-table').offsetHeight}px`;
        if(this.cardData && this.cardData.length){
          this.cardTablePage.total = this.cardData.length;
          this.cardTitle1 = `任务状态统计-负责项目 (${this.cardTablePage.total})条`;
        } else {
          this.cardTablePage.total = 0;
          this.cardTitle1 = `任务状态统计-负责项目`;
        }
      }, 1500)
      this.customColumns = customColumns3;
    })
  },
  methods: {
    /**
     * @author Wrl
     * 点击弹窗内部按钮
     */
    showNextLevelModal(val) {
      this.showModal(val);
    },
    /**
     * @author Wrl
     * 新增筛选条件
     */
    handleAdd(e) {
      if(this.shortType == 0) {
        this.index1++;
        this.shortForm.item1.push({
          sel1: '',
          sel2: '',
          ipt1: '',
        });
      } else if(this.shortType == 1) {
        this.index2++;
        this.shortForm.item2.push({
          sel1: '',
          sel2: '',
          sel3: '',
          sel4: '',
          sel5: '',
          ipt1: '',
        });
      }
    },
    /**
     * @author Wrl
     * 删除筛选条件
     */
    handleRemove(e) {
      if(this.shortType == 0) {
        if(this.index1 != 0) {
          this.shortForm.item1.splice(this.index1, 1);
          this.index1--
        }
      } else if(this.shortType == 1) {
        if(this.index2 != 0) {
          this.shortForm.item2.splice(this.index2, 1);
          this.index2--
        }
      }
    },
    /**
     * @author Wrl
     * 设置筛选条件 - 保存
     */
    saveShortcut() {
      this.$message.success('保存成功！');
      this.shortcutState = false;
    },
    /**
     * @author Wrl
     * 设置筛选条件弹窗
     */
    shortcutFilter(e) {
      this.shortcutState = e;
      if(e == false) {
        this.shortType = 0;
        this.shortForm = {
          item1: [
            {
              sel1: '',
              sel2: '',
              ipt1: '',
            }
          ],
          item2: [
            {
              sel1: '',
              sel2: '',
              sel3: '',
              sel4: '',
              sel5: '',
              ipt1: '',
            }
          ]
        }
      }
    },
    /**
     * @author Wrl
     * 点击卡片弹窗列表行 - 二级弹窗
     */
    boxClick(obj) {
      this.cardData2 = [];
      this.$nextTick(() => {
        this.cardTitle2 = `${obj.a}${obj.b}(计数):${obj.c}`;
        let arr = [];
        let reasons = ['上线准备', '项目验收', '上线报告编写与确认', '测试报告确认', '最终用户培训', '交付移交运维'];
        for(let i=0; i<obj.c; i++) {
          let temp = {
            xmmc: obj.a,
            reason: reasons[Math.floor((Math.random() * reasons.length))]
          }
          arr.push(temp);
        }
        this.cardData2 = arr;
        this.cardCol2[1].label = obj.b;
        this.showModal('card2');
      })
    },
    /**
     * @author Wrl
     * 重置查询条件
     */
    resetForm() {
      this.formData = {};
    },
    /**
     * @author Wrl
     * 切换查询条件
     */
    changeSearch() {
      this.showSearch = !this.showSearch
    },
    /**
     * @author Wrl
     * 点击树形控件
     */
    handleNodeClick(data) {
      this.contentIdx = data.id;
      this.customColumns = customColumns3;
      this.tableData = tableData3[this.contentIdx];
    },
    /**
     * @author Wrl
     * 显示弹窗
     */
    showModal(type) {
      this.modalType = type;
      if(type == 'card1') {
        this.cardModalState1 = true;
      } else if(type == 'card2') {
        this.cardModalState2 = true;
      } else if(type == 'card3') {
        this.tableModalState = true;
      } else if(type == 'preTaskModal') {
        this.preTaskModalState = true;
      } else if(type == 'workModal') {
        this.workModalState = true;
      } else if(type == 'workModal2') {
        this.workModalState2 = true;
      } else if(type == 'table') {
        this.tableModalState = true;
      }
    },
    /**
     * @author Wrl
     * 关闭弹窗
     */
    closeModal(type) {
      if(type == 'card1') {
        this.cardModalState = false;
      } else if(type == 'card2') {
        this.cardModalState2 = false;
      } else if(type == 'card3') {
        this.tableModalState = false;
      } else if(type == 'preTaskModal') {
        this.preTaskModalState = false;
      } else if(type == 'workModal') {
        this.workModalState = false;
      } else if(type == 'workModal2') {
        this.workModalState2 = false;
      } else if(type == 'table') {
        this.tableModalState = false;
      }
    },
		/**
		 * @author Wrl
		 * 获取分页信息
		 */
		changePage(page) {
			this.page.pageNum = page.pageNum; // 当前页
			this.page.pageSize = page.pageSize; // 每页条数
			this.page.total = page.total; // 总数
		},
    /**
     * @author Wrl
     * 获取卡片列表分页信息
     */
    changeCardTablePage(page) {
			this.cardTablePage.pageNum = page.pageNum; // 当前页
			this.cardTablePage.pageSize = page.pageSize; // 每页条数
			this.cardTablePage.total = page.total; // 总数
		},
    /**
     * @author Wrl
     * 获取卡片二级列表分页信息
     */
    changeCustCardDetailTablePage(page) {
			this.custCardDetailPage.pageNum = page.pageNum; // 当前页
			this.custCardDetailPage.pageSize = page.pageSize; // 每页条数
			this.custCardDetailPage.total = page.total; // 总数
		},
    /**
     * @author Wrl
     * 前置任务弹窗列表分页
     */
    preTaskModalTablePage(page) {
			this.preTaskModalPage.pageNum = page.pageNum; // 当前页
			this.preTaskModalPage.pageSize = page.pageSize; // 每页条数
			this.preTaskModalPage.total = page.total; // 总数
		},
    /**
     * @author Wrl
     * 工作报告弹窗列表分页
     */
    workModalTablePage(page) {
			this.workModalPage.pageNum = page.pageNum; // 当前页
			this.workModalPage.pageSize = page.pageSize; // 每页条数
			this.workModalPage.total = page.total; // 总数
		},
  }
};
</script>
<style lang="scss" scoped>
  .task-list {
    padding: 16px;
    ::v-deep {
      .table-modal {
        .el-dialog__header {
          padding: 20px 20px 0;
        }
        .el-dialog__body {
          padding: 0 20px 20px;
        }
      }
      .pre-task-modal {
        .el-dialog__header {
          padding: 20px;
        }
        .el-dialog__body {
          padding: 0 20px 20px;
          .cust-act-table .el-table__body tr {
            cursor: unset;
          }
        }
      }
      .work-modal {
        .el-dialog__header {
          padding: 20px;
        }
        .el-dialog__body {
          padding: 0 20px 20px;
        }
      }
      .card-modal {
        overflow: hidden;
        max-height: 750px;
        .el-dialog__header {
          padding: 20px;
        }
        .el-dialog__body {
          padding: 0 20px 20px;
          height: calc(100% - 120px);
          .form-content {
            height: 580px;
            overflow: scroll;
            padding: 20px 0;
            &::-webkit-scrollbar {
              width: 0;
              height: 0;
            }
          }
        }
        .card-modal-img {
          cursor: pointer;
          &.img1 {
            margin-top: 40px;
          }
          &.img3 {
            margin-top: 0px;
          }
        }
        .plan-change-btns {
          position: absolute;
          top: 10px;
          right: 50px;
          width: 900px;
          display: inline-flex;
          justify-content: flex-end;
          align-items: center;
          .el-icon-question {
            color:#11A983;
            margin-left:10px;
            cursor: pointer;
          }
        }
      }
      .search {
        .el-form-item {
          width: 100%;
        }
        .el-form-item__content {
          width: calc(100% - 90px);
        }
      }
      .help-modal {
        .el-dialog__header {
          padding: 20px;
        }
        .el-dialog__body {
          padding: 0 20px;
          div {
            height: 75vh;
            overflow-y: scroll;
            padding-bottom: 20px;
            box-sizing: content-box;
            ul {
              padding: 0;
              li {
                list-style: none;
                h4 {
                  margin: 20px 0 5px;
                }
                h5 {
                  color:#333333;
                  font-weight: bold;
                  font-family: Arial, "微软雅黑", "Helvetica Neue", "Microsoft Yahei", 宋体, Helvetica, STheiti, Tahoma, sans-serif, serif;
                  font-size: 14px;
                  margin: 5px auto;
                  text-indent: 1.5em;
                }
                p {
                  margin-top: 0;
                  text-indent: 2em;
                }
              }
            }
            &::-webkit-scrollbar {
              width: 0;
            }
          }
        }
      }
      .shortcut-modal {
        .el-dialog__header {
          padding: 10px 20px;
        }
        .el-dialog__body {
          padding: 0 20px;
        }
        .shortcut-modal-title {
          display: inline-flex;
          justify-content: space-between;
          align-items: center;
          width: 95%;
        }
        .shortcut-modal-body {
          .select-type {
            display: inline-flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 15px;
            .el-radio-group {
              margin-left: 10px;
            }
          }
          .cust-btn {
            padding: 2px 3px;
            font-size: 10px;
          }
        }
        .shortcut-modal-footer {
          display: inline-flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
        }
      }
    }
    .tree-search {
      width: 200px;
      ::v-deep .el-input__inner {
        border-radius: 20px;
      }
    }
    .cust-tree {
      margin-top: 16px;
    }
    .bottom-card {
      min-height: 100px;
    }
  }
  .border-r {
    min-width: 220px;
    border-right: 1px solid #cccccc;
  }
</style>